<template>
  <el-main>
    <el-card shadow="never">
      <sc-water-mark
        ref="wm"
        text="欢迎体验SCUI"
        subtext="admin@scui.com"
      >
        <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%"
        >
          <el-table-column
            prop="date"
            label="Date"
            width="180"
          />
          <el-table-column
            prop="name"
            label="Name"
            width="180"
          />
          <el-table-column
            prop="address"
            label="Address"
          />
        </el-table>
      </sc-water-mark>
    </el-card>
    <el-card
      shadow="never"
      style="margin-top: 15px;"
    >
      <el-button
        type="primary"
        @click="create"
      >
        创建水印
      </el-button>
      <el-button
        type="primary"
        @click="clear"
      >
        移除水印
      </el-button>
    </el-card>
  </el-main>
</template>

<script>
export default {
  name: 'Watermark',
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ]
    }
  },
  mounted() {

  },
  methods: {
    create(){
      this.$refs.wm.create()
    },
    clear(){
      this.$refs.wm.clear()
    }
  }
}
</script>

<style>
</style>
